<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>注册</title>
		<script src="js/rem.js"></script>
		<script type="text/javascript" src="js/xzx-api.js">
		</script>
		<script type="text/javascript" src="js/axios.min.js">
		</script>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/master.css">
	</head>

	<body>
		<div id="container">
			<div id="reg">
				<p>注册</p>
				<input class="text" id="userName" type="text" placeholder="用户名(限小写字母或数字组合)"><span></span>
				<input class="email" type="text" placeholder="邮箱地址"><span></span>
				<input class="password" id="passWord" type="text" placeholder="密码(6-16位字符)"><span></span>
				<button class="regBtn">注册</button>

			</div>
		</div>
		<script type="text/javascript">
			let btn = document.querySelector(".regBtn");
			let email = document.querySelector(".email");
			let flag1 = 0;
			userName.onchange = function() {
				let reg1 = /^[a-z0-9]+$/;
				if (reg1.test(this.value)) {
					flag1 = 1;
					this.nextElementSibling.innerHTML = "格式正确"
				} else {
					this.nextElementSibling.innerHTML = "格式错误"
					flag1 = 0;
				}
			}
			let flag2 = 0;
			email.onchange = function() {
				let reg3 = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/;
				if (reg3.test(this.value)) {
					this.nextElementSibling.innerHTML = "格式正确"
					flag2 = 1;
				} else {
					this.nextElementSibling.innerHTML = "格式错误"
					flag2 = 0;
				}
			}
			let flag3 = 0;
			passWord.onchange = function() {
				let reg4 = /^.{6,16}$/;
				if (reg4.test(this.value)) {
					this.nextElementSibling.innerHTML = "格式正确"
					flag3 = 1;
				} else {
					this.nextElementSibling.innerHTML = "格式错误"
					flag3 = 0;
				}
			}
			btn.onclick = function() {
				let username = userName.value;
				let password = passWord.value;
				if (flag1 && flag2 && flag3) {
					axios.get(regAPI, {
						params: {
							username,
							password
						}
					}).then(res => {
						// console.log(res);
						if (res.data.code) {
							alert(res.data.msg);
							location.href = "login.html"
						} else {
							alert(res.data.msg);
						}
					}).catch(error => {
						alert(error);
					})
				}else{
					alert("格式错误,请确认填写的信息无误后提交")
				}
			}
		</script>
	</body>

</html>
